import React, { Component } from 'react';
import { NavBar, Toast } from 'antd-mobile'
import { withRouter } from 'react-router-dom'
import { collectlist, canclecollect } from '../utils/api'
import {request_canclecollect_action,request_collectlist_action} from '../store/actionCreator'
import { connect } from 'react-redux';
class Collect extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
    }
    //点击返回到个人中心界面
    handleBack() {
        this.props.history.push('/index/mine')
    }
    //收藏列表请求
    componentDidMount() {
        // console.log(this.props.collectlist);
        collectlist({ userid: localStorage.getItem('userid') }).then((res) => {
            // console.log(res);
            this.setState({
                list: res.data.list
            })
        })
    }
    //点击取消收藏
    canclecollect(id) {
        // console.log(id);
        canclecollect({ userid: localStorage.getItem('userid'), goodid: id }).then((res) => {
            // console.log(res);
            collectlist({ userid: localStorage.getItem('userid') }).then((res) => {
            // console.log(res);
            this.setState({
               list: res.data.list
            })
        })
        })
    }
    render() {
        return (
            <div className='collect'>
                <NavBar onBack={() => { this.handleBack() }}>
                    我的收藏
                </NavBar>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <div className='good' key={item.id}>
                                <div className='img-box'>
                                    <img src={item.pic} alt="" />
                                </div>
                                <div className='text'>
                                    <div className='name'>{item.name}</div>
                                    <span className='free'>{item.salesPrice.name}</span>
                                    <div className="price">

                                        <span>活动价{item.salesPrice.value}</span>
                                        <button onClick={() => {
                                            this.canclecollect(item.id,
                                                Toast.show({ icon: 'success', content: '取消收藏成功' }))
                                        }}>取消收藏</button>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default connect(
    (state)=>{
        return  {"collectlist": state.collectlist
    }
    },
    (dispatch)=>{
        return {
            canclecollect(params){
                dispatch( request_canclecollect_action(params) )
            },
            collectgoods(params){
                dispatch( request_collectlist_action(params) )
            }
        }
    }
)(withRouter(Collect));